<template>
  <div class="max">
<div class="out">
<!--  在这个位置也进行一个数组的轮播-->
  <img class="big-img" :src="imagelist[current].url">
  <div class="inner">

<div class="innerr">
  <div class="left"
       v-for="(item,index) in imagelist" :key="index"
       v-show="current==index"
  >
    <div class="nums">
      <div class="nums-item"  :class="current==index?'active':''" v-for="(item,index) in imagelist" :key="index"></div>
    </div>
    <img :src="item.url">
    <!--轮播部分-->

  </div>
</div>

    <div class="right">
<!--      轮播图旁边-->
    </div>



  </div>

</div>
    <div class="zuo" @click="pre">
      <img src="@/assets/img/左箭头.png" >
    </div>
    <div class="you" @click="next">
      <img src="@/assets/img/右箭头.png" >

    </div>


  </div>
</template>

<script>
export default {
  data(){
    return{
      current:0,
      imagelist:[
        {url:'http://p1.music.126.net/2d34fUmk1qn8M773BBBQag==/109951169264407066.jpg?imageView&quality=89'},
        {url:'http://p1.music.126.net/SesfxHyKz4tTJ6WSj5BFMg==/109951169264274278.jpg?imageView&quality=89'},
        {url:'http://p1.music.126.net/jLE7No1kFq2D3M_NzG7L-A==/109951169264290597.jpg?imageView&quality=89'},
        {url:'http://p1.music.126.net/WacBnHkH98d4UanKeRhGPg==/109951169264283865.jpg?imageView&quality=89'},
        {url:'http://p1.music.126.net/Kt8V_1ZsKxAIKCHpiHdlmA==/109951169264255730.jpg?imageView&quality=89'}
         ]
    }
  },
  methods:{
    pre(){
console.log(this.current);
if (this.current>0){
this.current--;
}else {
  this.current=this.imagelist.length-1;
}

    },
    next(){
if (this.current<this.imagelist.length-1){
  this.current++;

}else {
  this.current=0;
}
    }
  },
  created(){
    // 每间隔3s 执行一次 下一章即可
    setInterval(()=>{
      this.next()
    },1000)
  }

}
</script>

<style  scoped>
html,body{
  padding: 0;
  margin: 0;
  width: 100%;
}
.max{
  height: 285px;
  margin: 15px;
}
.out{
  //background: black;
  width: 100%;
  height: 285px;
  position: relative;
  padding: 0;
  margin: 0;


}

.inner{
  width: 984px;
  height: 285px;
  margin: 0 auto;
  background: white;
  display: flex;
  position: relative;

}
.big-img{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 285px;
filter: blur(15px);


}
.innerr{
  width: 730px;
  height: 285px;
  position: relative;
}
.left{
  position: absolute;
  top: 0;
  left: 0;
}
.innerr img{
  width: 730px;
  height: 285px;
}
.right{
  width: 254px;
  height: 285px;
  background: url("@/assets/img/download.png");
}
.zuo{
  width: 37px;
  height: 63px;
  position: relative;
}
.zuo img{
  width: 37px;
  height: 63px;
  position: absolute;
  left: 87px;
  top:-190px;
}
.you{
  width: 37px;
  height: 63px;
  position: relative;
}
.you img{
  width: 37px;
  height: 63px;
  position: absolute;
  left: 1240px;
  top:-240px;
}
.nums{
  height: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 20px;


}
.nums-item{
  margin: 0 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.active{
  background: #ff2227;
}

</style>